
<template>
  <el-button @click="getPersons">获取</el-button>
  <div class="container">
    <div class="persons-box">
      <el-button v-for="item in persons" :key="item.name" @click="showInfo(item)">{{ item.name }}</el-button>
    </div>
    <div v-if="showPerson" class="person-info">
      <div>{{ `name:${personInfo.name}` }}</div>
      <div>{{ `age:${personInfo.age}` }}</div>
      <div>{{ `height:${personInfo.height}` }}</div>
      <div>{{ `weight:${personInfo.weight}` }}</div>
    </div>
    <!-- <DragWindow/> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// import DragWindow from './DragWindow.vue'

interface IPersonInfo {
  name: string;
  age: number;
  height: number;
  weight: number;
}

const emits = defineEmits(['update:modelValue']);

const persons = ref<IPersonInfo[]>([]);
const personInfo = ref<IPersonInfo>();
const showPerson = ref(false);

const getRandomNum = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;

const getName = (length: number) => {
  const min = 'a'.charCodeAt(0); // 'a'的ASCII码
  const max = 'z'.charCodeAt(0); // 'z'的ASCII码
  let name = '';
  Array.from(Array(length)).map(() => getRandomNum(min, max)).forEach((random:number, i:number) => {
    name += String.fromCharCode(random + i);
  });
  return name;
}

const getPersonInfo = (nameLength: number): IPersonInfo => {
  const info: IPersonInfo = {
    name: getName(nameLength),
    age: getRandomNum(0,100),
    height: getRandomNum(50,200),
    weight: getRandomNum(10,200)
  }
  return info;
}
const getPersons = () => {
  persons.value = Array.from(Array(getRandomNum(3,7))).map(() => getRandomNum(1,2)).map((item:number, i: number) => {
    const person = getPersonInfo(item * (i + 1));
    return person;
  });
  showPerson.value = false;
}
const showInfo = (person: IPersonInfo) => {
  personInfo.value = person;
  showPerson.value = true;
}
</script>


<style scoped>
.container {
  display: flex;
}
.container .persons-box .el-button{
  display: block;
  margin: 10px 0;
}
</style>
